<template>
  <div class="file">
    <CycleComponent
      :time="parseInt(dataArr.length * 1.5)"
      :paused="dataArr.length < 7 "
      ref="pause_ref"
    >
      <el-popover
        placement="left"
        trigger="hover"
        width="400"
        v-for="(item, index) in dataArr"
        :key="index"
      >
        <div class="pop" @mouseover="pauseIt" @mouseout="continueIt">
          <div class="sp-flex">
            <h2>{{ item.name }}</h2>
            <el-button type="text" size="small" @click="handleDetail(item, index)">详情</el-button>
          </div>
          <p class="paragraph">{{ item.tgt_list ? item.tgt_list.机密 : "" }}</p>
          <div class="sp-flex little-word">
            <span>文件大小：{{ item.file_size }}</span>
            <span>创建时间：{{ item.find_time }}</span>
          </div>
          <el-divider></el-divider>
          <p class="msg" style="color: #a4bfe9">
            {{ item.ip }} <i> | </i> {{ item.uname }} <i> | </i>
            {{ item.full_dept }}
          </p>
        </div>
        <div class="content" slot="reference">
          <div class="row">
            <span v-if="longtime">邮件外发：</span>
            <span class="symbol" v-if="item.disposal_status == 1"
              >违规文件</span
            >
            <span>{{ item.name }}</span>
          </div>
          <div class="row sp-flex">
            <p class="msg">
              {{ item.ip }} <i> | </i> {{ item.uname }} <i> | </i>
              {{ item.full_dept }}
            </p>
            <span> {{ item.find_time }}</span>
          </div>
        </div>
      </el-popover>
    </CycleComponent>
    <detailDialog ref="detailDialogRef"></detailDialog>
  </div>
</template>

<script>
import CycleComponent from "@/components/common/cycleComponent.vue";
import detailDialog from './detailDialog.vue'

export default {
  components: { CycleComponent, detailDialog },
  props: {
    dataArr: {
      type: Array,
      default: () => [],
    },
    longtime: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      paused: false,
    };
  },
  methods: {
    /** 详情 */
    handleDetail(item, index) {
      this.$refs.detailDialogRef.show(item.esId, item.index);
    },
    pauseIt() {
      this.$refs.pause_ref.pauseIt=true  
    },
    continueIt() {
      this.$refs.pause_ref.pauseIt = false
    }
  },
};
</script>

<style lang="scss" scoped>
.little-word {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.65);
}
.paragraph {
  margin: 1.25rem 0;
  display: -webkit-box;

  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pop {
  width: 100%;
  padding: 0 1.25rem;
  font-size: 0.75rem;
}
.file {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content {
    width: 100%;
    padding: 0.625rem 1.25rem;
    height: calc((49vh - 10rem) / 6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid rgba(59, 139, 255, 0.4);
    & + .content {
      margin-top: 0.625rem;
    }
    .symbol {
      padding: 0.125rem 0.625rem;
      background: #ff3535;
      border-radius: 0.25rem;
      margin-right: 0.9375rem;
      font-size: 0.625rem;
    }
  }
  .row {
    width: 100%;
    text-align: left;
  }
}
.msg {
  i {
    margin: 0 5px;
    font-style: normal;
  }
}
</style>